<template>
  <div class="square-goods-list table-theme">
    <head-title title="营销-广场商品列表"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left">
          <tabs-view :list="classifyList" :tabsIndex="goods_type" @roleType="roleType"></tabs-view>
        </div>
        <div class="menu-right">
           <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
        </div>
      </div>
      <div class="top-add-btn">
        <div class="add" v-for="item in addList" :key="item.id">
          <el-button type="primary" size="mini" @click="addGoods(item.id)">{{
            item.text
          }}</el-button>
        </div>
      </div>
      <p style="text-align: right; line-height: 30px">总用户数：{{ total }}</p>
      <el-table :data="list">
            <el-table-column label="序号" align="center" prop="id"></el-table-column>
            <el-table-column label="商品ID" align="center" prop="goods_id"></el-table-column>
            <el-table-column label="商品名称" align="center" prop="goods_name"></el-table-column>
            <el-table-column label="商品图" align="center">
                <template slot-scope="scope">
                    <ImgPopover :src="scope.row.goods_image"></ImgPopover>
                </template>
            </el-table-column>
            <el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="onDel(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
      </el-table>
      <div class="pages"><el-pagination background layout="prev, pager, next, jumper" :page-size="limit" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
    </el-card>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
import addShelvesGoods from '@/components/layer-dialog/add-shelves-goods/add-shelves-goods.vue';
import addShelvesPackage from '@/components/layer-dialog/add-shelves-goods/add-shelves-package.vue';
import addShelvesStoreGoods from '@/components/layer-dialog/add-shelves-goods/add-shelves-store-goods.vue';
import TabsView from '@/components/TabsView'
export default {
  components: {
    ImgPopover,
    addShelvesGoods,
    addShelvesPackage,
    addShelvesStoreGoods,
		TabsView
  },
  data() {
    return {
      searchOption: [
        {
          value: 0,
          label: "商品ID",
        },
      ],
      classSelect: 0,
      selectContent: "",
      classifyList: ["所有","平台商品", "全屋套餐","N98套餐","商家商品","第三方"],
      goods_type: 0,
      page: 0,
      square_id: "",
      limit: 20,
      addList: [
        {
          id: 1,
          text: "关联平台商品",
        },
        {
          id: 2,
          text: "关联全屋套餐",
        },
        {
          id: 3,
          text: "关联N98套餐",
        },
        {
          id: 4,
          text: "关联商家商品",
        },
      ],
      list:[],
      total:0
    };
  },
  methods: {
    init(e) {
      this.page = e;
      let data = {
        page: e ? e - 1 : 0,
        limit: this.limit,
        square_id: this.square_id,
        goods_id: this.selectContent,
        goods_type: this.goods_type,
      };
      if(this.goods_type == 0){
        delete data.goods_type
      }
      this.$http(this.$ApiList.SquareGoodsList, data).then((res) => {
        this.list = res.datas.data;
        this.total = res.datas.count;
      });
    },
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    refreshPage() {
      this.selectContent = "";
      this.goods_type = '';
      this.init();
    },
    roleType(type) {
      this.goods_type = type;
      this.init();
    },
    addGoods(type) {
        if (type == 1) {
					this.$layer.iframe({
						title: '选择商品',
						maxmin: true,
						area: ['65%', '60%'],
						content: {
							content: addShelvesGoods, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								shelf_id: Number(this.square_id),
                                show_type:"square"
							} //props
						}
					});
				} else if (type == 2) {
					this.$layer.iframe({
						title: '选择套餐',
						maxmin: true,
						area: ['45%', '60%'],
						content: {
							content: addShelvesPackage, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								shelf_id: Number(this.square_id),
								is_house: 2,
                                show_type:"square"
							} //props
						}
					});
				} else if (type == 3) {
					this.$layer.iframe({
						title: '选择套餐',
						maxmin: true,
						area: ['45%', '60%'],
						content: {
							content: addShelvesPackage, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								shelf_id: Number(this.square_id),
								is_house: 1,
                                show_type:"square"
							} //props
						}
					});
				} else if (type == 4) {
					this.$layer.iframe({
						title: '选择商品',
						maxmin: true,
						area: ['45%', '60%'],
						content: {
							content: addShelvesStoreGoods, //传递的组件对象
							parent: this, //当前的vue对象
							data: {
								goods_type: type,
								shelf_id: Number(this.square_id),
                                show_type:"square"
							} //props
						}
					});
				} 
    },
    onDel(id){
        this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          this.$http(this.$ApiList.DelSquareGoods,{id}).then(res=>{
              this.$message.success(res.datas);
              this.init(this.page);
          })
      })
    }
  },
  created() {
    this.square_id = this.$route.query.square_id;
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.square-goods-list {
  .top-add-btn {
    margin-top: 20px;
    display: flex;
    height: 40px;
    .add {
      margin-right: 10px;
    }
  }
}
</style>